<template>
  <div>
    <el-main class="setting-main">
      <div class="opers flex v-c">
        <el-form :inline="true" class="">
          <el-form-item label="设备编号">
            <el-input
              placeholder="请输入设备编号"
              v-model.trim="filterForm.number"
            ></el-input>
          </el-form-item>
          <el-form-item label="安装位置">
            <el-input
              placeholder="请输入安装位置"
              v-model.trim="filterForm.position"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="searchAction">
            <i class="iconfont icon-search"></i> 查询
          </el-button>
        </el-form>
        <div>
          <el-button
            type="blue"
            @click="showGroup"
            :disabled="!$store.getters.hasEditPermission"
            v-if="
              hasPermission('017001') &&
                activeUnit &&
                activeUnit.id != 0 &&
                type == 18
            "
          >
            <i class="iconfont icon-add"></i>
            分组
          </el-button>
          <el-button
            type="blue"
            @click="newAction"
            v-if="hasPermission('017001')"
            :disabled="!$store.getters.hasEditPermission"
          >
            <i class="iconfont icon-add"></i> 添加
          </el-button>
          <el-button
            type="blue"
            @click="importAction"
            v-if="hasPermission('017002')"
            :disabled="!$store.getters.hasEditPermission"
          >
            <i class="iconfont icon-import-folder"></i> 导入
          </el-button>
          <el-button
            v-if="hasPermission('017003')"
            type="blue"
            @click="exportAction"
            :disabled="!$store.getters.hasEditPermission"
          >
            <i class="iconfont icon-export-folder"></i> 导出
          </el-button>
          <el-button
            v-if="hasPermission('017004')"
            type="blue"
            @click="downloadAction"
            :disabled="!$store.getters.hasEditPermission"
          >
            <i class="iconfont icon-download"></i> 模板下载
          </el-button>
        </div>
      </div>
      <el-table :data="dataList" style="width: 100%" v-loading="loading">
        <el-table-column
          type="index"
          label="序号"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column prop="number" label="设备编号"></el-table-column>
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column
          prop="deviceTypeName"
          label="设备类型"
        ></el-table-column>
        <el-table-column prop="position" label="安装位置"></el-table-column>
        <el-table-column label="操作" :width="type == 7 ? 200 : 320">
          <template slot-scope="scope">
            <div class="nowrap">
              <el-button
                type="primary"
                @click="openIssueAction(scope.row)"
                v-if="scope.row.deviceType == 22 && hasPermission('017009')"
                :disabled="!$store.getters.hasEditPermission"
                >控制分合闸</el-button
              >
              <el-button
                type="primary"
                @click="evidenceAction(scope.row)"
                v-if="
                  scope.row.deviceClassify == 6 &&
                    scope.row.productId == 6003 &&
                    hasPermission('017010')
                "
                :disabled="!$store.getters.hasEditPermission"
                >证据链下载</el-button
              >
              <el-button
                type="primary"
                @click="muteAction(scope.row)"
                v-if="scope.row.deviceClassify == 3 && hasPermission('017011')"
                :disabled="!$store.getters.hasEditPermission"
                >消音</el-button
              >
              <el-button
                v-if="hasPermission('017005')"
                type="primary"
                @click="noticeAction(scope.row)"
                :disabled="!$store.getters.hasEditPermission"
                >通知</el-button
              >
              <el-button
                v-if="hasPermission('017006')"
                type="primary"
                @click="editAction(scope.row)"
                :disabled="!$store.getters.hasEditPermission"
              >
                编辑
              </el-button>
              <el-button
                v-if="
                  hasPermission('017007') &&
                    (scope.row.deviceClassify == 1 ||
                      scope.row.deviceClassify == 2)
                "
                :disabled="!$store.getters.hasEditPermission"
                type="primary"
                @click="thresholdAction(scope.row)"
              >
                阈值
              </el-button>
              <el-button
                v-if="scope.row.deviceClassify == 19"
                :disabled="!$store.getters.hasEditPermission"
                type="primary"
                @click="showSwitch(scope.row)"
              >
                开关列表
              </el-button>
              <el-button
                v-if="scope.row.deviceType == '1001'"
                :disabled="!$store.getters.hasEditPermission"
                type="primary"
                @click="showChildDevice(scope.row)"
              >
                子设备列表
              </el-button>
              <el-button
                v-if="hasPermission('017008')"
                type="red"
                @click="deleteAction(scope.row)"
                :disabled="!$store.getters.hasEditPermission"
                >删除</el-button
              >
              <el-button
                v-if="hasPermission('017008') && scope.row.deviceClassify == 11"
                type="green"
                :disabled="!$store.getters.hasEditPermission"
                @click="setChannel(scope.row)"
                >配置通道</el-button
              >
              <el-button
                v-if="scope.row.deviceClassify == 3"
                type="green"
                @click="bindMonitorAction(scope.row)"
                :disabled="!$store.getters.hasEditPermission"
              >
                绑定监控
              </el-button>
              <el-button
                v-if="
                  scope.row.deviceClassify == 1 &&
                    (scope.row.productId == '1001' ||
                      scope.row.productId == '1005')
                "
                type="green"
                @click="remoteControlAction(scope.row)"
                :disabled="!$store.getters.hasEditPermission"
                >远程控制</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total > 0"
        class="text-right mt-20 mr-20"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, total, jumper"
        :total="total"
      >
      </el-pagination>
    </el-main>
    <!-- 添加/编辑 start -->
    <el-dialog
      v-if="newModalVisible"
      :title="newModalTitle"
      :visible.sync="newModalVisible"
      width="660px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <MonitorNew
        v-if="type == '6' || (+type > 10 && type != 18 && type != 19)"
        ref="newData"
        :type="type"
        :unit="activeUnit"
        :activeData="activeData"
        @success="submitSuccessAction"
        @fail="submitFailAction"
        @submitting="adding = true"
        @cancel="newModalVisible = false"
      >
      </MonitorNew>
      <New
        v-else
        ref="newData"
        :type="type"
        :unit="activeUnit"
        :activeData="activeData"
        @success="submitSuccessAction"
        @fail="submitFailAction"
        @submitting="adding = true"
        @cancel="newModalVisible = false"
        :isChildren="1"
      >
      </New>
      <div slot="footer">
        <el-button type="cancel" @click="newModalVisible = false"
          >取消</el-button
        >
        <el-button type="primary" :loading="adding" @click="submitAction"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加/编辑 end -->
    <!-- 阈值 start -->
    <el-dialog
      v-if="thresholdModalVisible"
      title="阈值"
      :visible.sync="thresholdModalVisible"
      width="660px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <Threshold
        ref="threshold"
        :number="activeNumber"
        @success="submitThresholdSuccess"
        @fail="saving = false"
      ></Threshold>
      <div slot="footer">
        <el-button type="cancel" @click="thresholdModalVisible = false"
          >取消</el-button
        >
        <el-button type="primary" :loading="saving" @click="submitThreshold"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 通知 start -->
    <el-dialog
      v-if="noticeModalVisible"
      title="通知"
      :visible.sync="noticeModalVisible"
      width="660px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <Notice
        ref="notice"
        :number="activeNumber"
        :deviceClassify="type"
      ></Notice>
      <setting-notice
        ref="Notice"
        :popType="false"
        :noticeorgId="noticeorgId"
        :noticeId="noticeId"
      ></setting-notice>
      <!-- <div slot="footer">
	    		<el-button type="cancel" @click="noticeModalVisible=false">取消</el-button>
		  		<el-button type="primary" :loading="saving" @click="submitNotice">保存</el-button>
		  	</div> -->
    </el-dialog>
    <!-- 证据链下载 start -->
    <el-dialog
      v-if="evidenceVisible"
      title="证据链列表"
      :visible.sync="evidenceVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <evidence :number="activeNumber"></evidence>
    </el-dialog>
    <!-- 远程控制 分合闸 start -->
    <el-dialog
      class="remote-modal"
      v-if="issueModalVisible"
      title="远程控制 分合闸"
      :visible.sync="issueModalVisible"
      width="300px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <p>当前状态：{{ activeData.openingState == 1 ? "开" : "关" }}</p>
      <div class="flex-1 mt-10" v-if="activeData.openingState == 1">
        <el-button class="full" type="red" @click="openIssue">关闭</el-button>
      </div>
      <div class="flex-1 mt-10" v-else>
        <el-button class="full" type="primary" @click="openIssue"
          >打开</el-button
        >
      </div>
    </el-dialog>
    <!-- 远程控制 分合闸 end -->
    <!-- 远程抄表分组 start -->
    <group
      v-if="groupModalVisible"
      :visible.sync="groupModalVisible"
      :winH="winH"
      :activeUnit="activeUnit"
      :deviceClassify="type"
    ></group>
    <!-- 远程抄表分组 end -->

    <!-- 加油站通道 start -->
    <Channel
      v-if="channelModalVisible"
      :visible.sync="channelModalVisible"
      :activeDevice="activeData"
      :deviceClassify="type"
    ></Channel>
    <!-- 加油站通道 end -->
    <!-- 烟感绑定监控 start -->
    <Monitor
      v-if="monitorModalVisible"
      :visible.sync="monitorModalVisible"
      :activeDevice="activeData"
      :business="activeUnit"
      :deviceClassify="type"
    ></Monitor>
    <!-- 烟感绑定监控 end -->
    <!-- 开关列表 -->
    <SwitchList
      v-if="switchModalVisible"
      :visible.sync="switchModalVisible"
      :activeDevice="activeData"
      :business="activeUnit"
      :deviceClassify="type"
    ></SwitchList>

    <!-- 远程控制 start -->
    <el-dialog
      class="remote-modal"
      v-if="remoteControlModalVisible"
      title="远程控制"
      :visible.sync="remoteControlModalVisible"
      width="300px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <p>当前状态：{{ activeData.openingState == 1 ? "开" : "关" }}</p>
      <div class="flex-1 mt-10" v-if="activeData.openingState == 1">
        <el-button class="full" type="red" @click="setRemoteControl"
          >关闭</el-button
        >
      </div>
      <div class="flex-1 mt-10" v-else>
        <el-button class="full" type="primary" @click="setRemoteControl"
          >打开</el-button
        >
      </div>
    </el-dialog>
    <!-- 远程控制 end -->
    <!-- 导入弹窗 start -->
    <importFile
      v-if="importModalVisible"
      :visible.sync="importModalVisible"
      :business="activeUnit"
      :deviceClassify="type"
      @success="importSuccess"
      :isChildren="1"
    ></importFile>
  </div>
  <!-- 导入弹窗 end -->
</template>

<script>
import { mapState } from "vuex";
import New from "@/components/equipment/New.vue";
import MonitorNew from "@/components/equipment/MonitorNew.vue";
import Threshold from "@/components/equipment/Threshold.vue";
import Notice from "@/components/equipment/Notice.vue";
import Evidence from "@/components/equipment/Evidence.vue";
import Group from "@/components/equipment/Group.vue";
import Channel from "@/components/equipment/Channel.vue";
import Monitor from "@/components/equipment/Monitor.vue";
import SwitchList from "@/components/switch/list.vue";
import UnitList from "@/components/equipment/UnitList.vue";
import importFile from "@/components/equipment/Import.vue";
export default {
  name: "Equipment",
  components: {
    New,
    MonitorNew,
    Threshold,
    Notice,
    Evidence,
    Group,
    Channel,
    Monitor,
    SwitchList,
    UnitList,
    importFile,
  },
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      type: this.$route.query.type || "1",
      unitKeyword: "",
      filterForm: {},
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      loading: false,
      dataList: [],
      newModalTitle: "添加子设备",
      newModalVisible: false,
      adding: false,
      activeData: null,
      thresholdModalVisible: false,
      activeNumber: "",
      saving: false,
      noticeModalVisible: false,
      evidenceVisible: false,
      issueModalVisible: false,
      groupModalVisible: false,
      channelModalVisible: false,
      monitorModalVisible: false,
      switchModalVisible: false,
      remoteControlModalVisible: false,
      importModalVisible: false,
      noticeorgId: "",
      noticeId: "",
    };
  },
  computed: {
    ...mapState(["siteInfos"]),
  },
  props: {
    activeUnit: {
      type: Object,
      default: {},
    },
    childnewModalVisible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    $route(to, from) {
      this.type = to.query.type;
      this.getData(1);
    },
    unitKeyword(val) {
      // this.$refs.unitTree.filter(val)
    },
  },
  methods: {
    remoteControlAction(item) {
      this.activeData = item;
      this.remoteControlModalVisible = true;
    },
    setRemoteControl() {
      let state = this.activeData.openingState == 1 ? 2 : 1;
      this.$post("/fireFightingIOT/device/createCommand", {
        number: this.activeData.number,
        state,
      }).then(
        (res) => {
          this.remoteControlModalVisible = false;
          this.$message.success("操作成功");
          this.getData(this.currentPage);
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    showSwitch(item) {
      this.activeData = item;
      this.switchModalVisible = true;
    },
    bindMonitorAction(item) {
      this.activeData = item;
      this.monitorModalVisible = true;
    },
    setChannel(item) {
      this.activeData = item;
      this.channelModalVisible = true;
    },
    showGroup() {
      this.groupModalVisible = true;
    },
    openIssueAction(item) {
      this.activeData = item;
      this.issueModalVisible = true;
    },
    openIssue() {
      let type = this.activeData.openingState == 1 ? 2 : 1;
      this.$post("/fireFightingIOT/device/openIssued", {
        number: this.activeData.number,
        type: type,
      }).then(
        (res) => {
          this.issueModalVisible = false;
          this.$message.success("操作成功");
          this.getData(this.currentPage);
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    evidenceAction(item) {
      this.activeNumber = item.number;
      this.evidenceVisible = true;
    },
    noticeAction(item) {
      this.activeNumber = item.number;
      this.noticeModalVisible = true;
      this.noticeorgId = item.orgId;
      this.noticeId = item.id;
    },
    getData(page) {
      this.loading = true;
      let businessId = "";
      if (this.siteInfos.userType == 1) {
        businessId = !this.activeUnit ? null : this.activeUnit.businessId;
      } else {
        businessId = this.siteInfos.homeId;
      }
      let params = Object.assign(
        {
          page: page,
          limit: this.pageSize,
          businessId,
          deviceClassify: this.type,
          isChildren: 1,
          transDeviceCode: this.activeUnit.number,
        },
        this.filterForm
      );
      this.$get("/fireFightingIOT/device/deviceListPage", params).then(
        (res) => {
          this.loading = false;
          let data = res.data;
          if (data) {
            this.currentPage = page;
            this.total = data.totalSize;
            this.dataList = data.Items;
          }
        },
        (err) => {
          this.loading = false;
          this.currentPage = page;
          this.total = 0;
          this.dataList = [];
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    filterUnitNode(value, data) {
      if (!value || !data.name) return true;
      return data.name.indexOf(value) !== -1;
    },
    searchUnit() {
      this.$refs.unitTree.filter(this.unitKeyword);
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    searchAction() {
      this.getData(1);
    },
    handleCurrentChange(page) {
      this.getData(page);
    },
    getDataById(id, cbk) {
      this.$get("/fireFightingIOT/device/detail", {
        id: id,
        deviceClassify: this.type,
      }).then(
        (res) => {
          let thisData = res.data;
          cbk && cbk(thisData);
        },
        (err) => {
          //
        }
      );
    },
    newAction() {
      this.activeData = null;
      this.newModalTitle = "添加子设备";
      this.newModalVisible = true;
    },
    editAction(item) {
      this.getDataById(item.id, (data) => {
        this.activeData = data;
        this.newModalTitle = "编辑子设备";
        this.newModalVisible = true;
      });
    },
    submitAction() {
      this.$refs.newData.submitAction();
    },
    // 新增/编辑成功
    submitSuccessAction(data) {
      this.adding = false;
      this.newModalVisible = false;
      this.getData(this.currentPage);
    },
    submitFailAction() {
      this.adding = false;
    },
    importAction() {
      this.importModalVisible = true;
    },
    importSuccess() {
      this.getData(this.currentPage);
    },
    exportAction() {
      let businessName = this.activeUnit.name
        ? this.activeUnit.name == "企业列表"
          ? ""
          : this.activeUnit.name
        : "";
      let deviceClassify = this.type;
      let position = this.filterForm.position ? this.filterForm.position : "";
      let number = this.filterForm.number ? this.filterForm.number : "";
      let url = `${this.config.baseApi}/uploadFile/getDeviceTemplte?accountname=${this.siteInfos.accountname}&businessName=${businessName}&deviceClassify=${deviceClassify}&position=${position}&number=${number}&isChildren=1`;
      window.open(url);
    },
    downloadAction() {
      window.open(
        this.config.baseApi +
          "/uploadFile/getTemplte?accountname=" +
          this.siteInfos.accountname
      );
    },
    deleteAction(item) {
      this.showConfirm("确定删除该设备吗？", () => {
        this.deleting = true;
        this.$post("/fireFightingIOT/device/typeDelete", {
          id: item.id,
          deviceClassify: item.deviceClassify,
        }).then(
          (res) => {
            this.deleting = false;
            this.$message.success("删除成功");
            // this.dataList.splice(index,1)
            this.getData(this.currentPage);
          },
          (err) => {
            this.deleting = false;
            this.$message.error(err.msg);
          }
        );
      });
    },
    thresholdAction(item) {
      this.activeNumber = item.number;
      this.thresholdModalVisible = true;
    },
    submitThreshold() {
      this.$refs.threshold.submitAction();
    },
    submitThresholdSuccess() {
      this.saving = false;
      this.thresholdModalVisible = false;
    },
    showChildDevice(item) {
      //子设备列表
      this.childDeviceVisible = true;
    },
  },
  created() {
    this.getData(1);
  },
  activated() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.flex.v-c {
  align-items: baseline !important;
  justify-content: space-between !important;
}
</style>
